<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="number" id="i1">
<input type="number" id="i2">
<input type="button" value="加" onclick="f(1)">
<input type="button" value="减" onclick="f(2)">
<input type="button" value="乘" onclick="f(3)">
<input type="button" value="除" onclick="f(4)">
<!--
<input type="button" value="加" onclick="add()">
<input type="button" value="减" onclick="sub()">
<input type="button" value="乘" onclick="mul()">
<input type="button" value="除" onclick="div()">
-->
<div>结果=
  <span></span>
</div>
<script>
  function f(z){
    let x = document.querySelector("#i1");
    let y = document.querySelector("#i2");
    let s = document.querySelector("span");
    switch (z){
      case 1:
        s.innerText = parseFloat(x.value) + parseFloat(y.value) + "";
        break;
      case 2:
        s.innerText = parseFloat(x.value) - parseFloat(y.value) + "";
        break;
      case 3:
        s.innerText = parseFloat(x.value) * parseFloat(y.value) + "";
        break;
      case 4:
        s.innerText = parseFloat(x.value) / parseFloat(y.value) + "";
        break;
    }
  }
 /*
 function add(){
    let x = document.querySelector("#i1");
    let y = document.querySelector("#i2");
    let s = document.querySelector("span");
    s.innerText = parseFloat(x.value) + parseFloat(y.value) + "";
  }
  function sub(){
    let x = document.querySelector("#i1");
    let y = document.querySelector("#i2");
    let s = document.querySelector("span");
    s.innerText = parseFloat(x.value) - parseFloat(y.value) + "";
  }
  function mul(){
    let x = document.querySelector("#i1");
    let y = document.querySelector("#i2");
    let s = document.querySelector("span");
    s.innerText = parseFloat(x.value) * parseFloat(y.value) + "";
  }
  function div(){
    let x = document.querySelector("#i1");
    let y = document.querySelector("#i2");
    let s = document.querySelector("span");
    s.innerText = parseFloat(x.value) / parseFloat(y.value) + "";
  }
 */
</script>
<div></div>
</body>
</html>